import React, { Component } from 'react'

export class LifeCycle extends Component {
    constructor(props){
        super(props)
        console.log("hi,my is constructor");
        this.state = {
            list:["1","2"]
        }
    }
    btn(){
        this.setState({list:["3",'4']})
    }
    to(){
        // location.href="www.baidu.com"
    }
    //重要
    componentWillMount(){
        console.log("hi,my is componentWillMount");
    }
    componentDidMount(){
        console.log("hi,my is componentDidMount");
    }
    //当他是子组件的时候 接受到props发生改变时会触发
    componentWillReceiveProps(){
        console.log("hi,my is componentWillReceiveProps");
    }
    //重要
    shouldComponentUpdate(){
        //返回一个布尔值 如果是true接下来的代码继续执行 如果是false 下面的代码不执行
        console.log("hi,my is shouldComponentUpdate");
        return true
    }
    //在更新后立即调用
    componentDidUpdate(){
        console.log("hi,my is shouldComponentUpdate");
    }

    //卸载
    componentWillUnmount(){
        console.log("hi,my is componentWillUnmount");
    }
    render() {
        let {list} = this.state
        return (
            <div>
                <button onClick={this.btn.bind(this)}>点我</button>
                {
                    list.map(item=>{
                        return <p key={item}>{item}</p>
                    })
                }
                <button onClick={this.to.bind(this)}>点我离开</button>
                <a href="www.baidu.com" >============</a>
            </div>
        )
    }
}

export default LifeCycle
